<template>
  <div class="account">
    <h3>{{ $t("language.account.name") }}</h3>
    <el-form class="loginfrom" ref="loginform" :label-position="logininfo.labelPosition" :model="logininfo.loginform"
      :rules="loginrules" style="width: 90%">
      <el-form-item label="" prop="account">
        <div class="phone" tabindex="0">
          <el-input :placeholder="$t('language.erolls.input1')" style="width: 100%; color: #fff"
            v-model="logininfo.loginform.account" :rules="loginrules">
            <template #prepend>
              <el-icon color="#c0c4cc" size="32">
                <User />
              </el-icon>
              <strong></strong>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="" prop="password">
        <div class="password" tabindex="0">
          <el-input :type="open ? 'word' : 'password'" style="width: 100%" :placeholder="$t('language.erolls.input3')"
            v-model="logininfo.loginform.password">
            <template #prepend>
              <el-icon color="#c0c4cc" size="32">
                <Lock />
              </el-icon>
              <strong></strong>
            </template>
            <template #append>
              <el-icon v-if="open" @click="open = !open" color="#c0c4cc" size="24">
                <View />
              </el-icon>
              <el-icon v-else color="#c0c4cc" @click="open = !open" size="24">
                <Hide />
              </el-icon>
            </template>
          </el-input>
        </div>
      </el-form-item>
    </el-form>
    <div class="checkbox">
      <el-checkbox text-color="#606266" v-model="rememberinfo">{{
      $t("language.loginhome.check")
    }}</el-checkbox>
      <span @click.prevent="openforget">{{
      $t("language.loginhome.tips")
    }}</span>
    </div>
    <el-button :loading="logininfo.loading" :disabled="logininfo.loading" @click="submitForm" class="login">{{
      $t("language.loginhome.login") }}</el-button>
    <div class="forgetdialog">
      <el-dialog width="90%" v-model="initVisible2" :show-close="false">
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.forget.name") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <el-form ref="ruleFormRef" :model="forget" :rules="forgetrules" label-width="auto" class="demo-ruleForm"
            label-position="top" status-icon>
            <el-form-item :label="$t('language.forget.title')" prop="phone">
              <el-input clearable :placeholder="$t('language.forget.placehold')" v-model="forget.phone" />
            </el-form-item>
          </el-form>
          <el-button class="confirm">{{
      $t("language.forget.btn")
    }}</el-button>
          <p class="text">
            {{ $t("language.forget.text1") }}
            <span>{{ $t("language.forget.text2") }}</span>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CloseBold, View, Hide, Lock, User } from '@element-plus/icons-vue'
import { reactive, watch, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let open = ref<boolean>(true);
let openforget = () => {
  store.$patch({loginopen:false})
  // store.commit("SET_LOGIN", false);
  // router.push('/kefu')
}
// //本地存储
// let token = useToken()//存储token
// let userinfo = useUserinfo()//存储用户信息
// let coininfo = useCoininfo()//存储token
// let cointype = useCointype()//存储用户信息
// let loginopen = useLoginopen()//是否关闭登录弹窗
// let account = useAccount()//保存用户手机号
// let accountpassword = useAccountpassword()//保存用户密码
// let accountremember = useAccountRemember()//保存用户密码
const store = useStore()
let token = computed(() => store.token)//存储token
let userinfo: any = computed(() => store.userinfo)//存储用户信息
let coininfo: any = computed(() => store.coininfo)//存储token
let cointype = computed(() => store.cointype)//存储用户信息
let loginopen = computed(() => store.$state.loginopen)//是否关闭登录弹窗
let account = computed(() => store.account)//保存用户手机号
let accountpassword: any = computed(() => store.accountpassword)//保存用户密码
let accountremember = computed(() => store.accountremember)//保存用户密码

let initVisible2 = ref<boolean>(false);
//登录信息
const logininfo: any = reactive({
  loginform: {
    // mobile: undefined,
    // password: undefined,
    account: "",//账号
    password: "",//密码

  },
  labelPosition: "right",
  loading: false,
});
let forget = reactive({
  phone: "",
});
let forgetrules = reactive({});
let rememberinfo = ref<boolean>(false);
//记住密码
watch(
  () => initVisible2.value,
  () => {
    logininfo.loginform.password = decrypt(accountpassword.value);
    logininfo.loginform.account = account.value
    store.accountremember = accountremember.value
  },
  {
    immediate: true,
  }
);
//记住密码
watch(
  [
    () => rememberinfo.value,
    () => logininfo.loginform.password,
    () => logininfo.loginform.account,
  ],
  (newval) => {
    // const md5: any = new Md5();
    // md5.appendAsciiStr(logininfo.loginform.password);
    logininfo.loginform.account = logininfo.loginform.account.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    logininfo.loginform.password = logininfo.loginform.password.replace(/[^0-9a-zA-Z_\.]*$/g, '')
    const encryptpassword = encrypt(logininfo.loginform.password);
    if (newval[0]) {
      store.accountpassword = encryptpassword
      store.account = logininfo.loginform.account
      store.accountremember = rememberinfo.value
    } else {
      store.accountpassword = ''
      store.account = ''
      store.accountremember = false
    }
  }
);

//表单规则
const loginrules = reactive({
  mobileOrAccount: [
    {
      required: true,
      message: t("language.loginhome.tipsphone"),
      trigger: ["blur"],
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: t("language.loginhome.tipsword"),
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: t("language.loginhome.tips2"),
      trigger: "blur",
    },
  ],
});
//提交信息
let loginform: any = ref(null);
let submitForm = () => {

  loginform.value.validate((valid: any) => {
    if (valid) {
      logininfo.loading = true;
      let form = JSON.parse(JSON.stringify(logininfo.loginform));
      form.password = encrypt(logininfo.loginform.password)
        .toString()
        .substring(0, 32);
      useHttpPOST("/UserCenter/v1.0/Web/Login/Phone", {
        ...form,
      })
        .then((res: any) => {
          switch (res.data.value.code) {
            case 5077:
              ElMessage({
                message: t("language.commontips.usernoexist"),
                type: "error",
                duration: 1000,
              });
              break;
            case 0:
              ElMessage({
                message: t("language.commontips.erollsuccess"),
                type: "success",
                duration: 1000,
                onClose: () => {
                  store.$patch({
                    token: res.data.value.data.jwtToken
                  })
                  store.$patch({ userinfo: res.data.value.data.info })

                  GetUserInfo(res.data.value.data.info).then(({ data }: { data: any }) => {
                    store.$patch({ coininfo: data.value.data.accounts })
                    store.$patch({ cointype: "BRL" })
                    store.$patch({loginopen:false})
                  })
                }
              });


              break;
          }
        })
        .finally(() => {
          logininfo.loading = false;
        });
      // debugger
    } else {
      return false;
    }
  });
};
</script>

<style lang="scss">
.forgetdialog {
  #bigcloser {
    width: 100%;
    @include flex(row, flex-end, center);

    strong {
      display: block;
      width: 28px;
      height: 28px;
    }

    h4 {
      flex: 1;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }

    span {
      display: block;
      width: 28px;
      height: 28px;
      @include flex(row, center, center);
      border: 2px solid #b5b6c8;
      border-radius: 16px;
      margin-right: -7px;
    }
  }

  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none;
    border: 1px solid #4a4c53;
    height: 40px !important;
    color: #fff;

    border-radius: 10px;
  }



  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .el-form-item__label {
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px !important;
  }

  .dialogmain {
    padding: 30px 40px;

    .confirm {
      background: #0a906c !important;
      border: none;
      color: #fff;
      display: block;
      width: 100%;
      height: 40px;
      padding: 0;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 20px auto 20px;
    }

    .text {
      font-size: 13px;
      width: 100%;
      color: #b5bac8;
      margin: 13px 0;

      span {
        color: #03b484;
        font-size: 14px;
      }
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}

.account {
  height: 320px;

  .el-form-item {
    margin-bottom: 28px !important;
  }

  .el-input__inner {
    color: #fff !important;
  }

  .el-select,
  .el-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #4a4c53 !important;
  }

  .el-input__wrapper,
  .el-tooltip__trigger {
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
  }

  .el-select,
  .el-input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #4a4c53 !important;
  }

  .el-input-group__append {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    border-radius: 10px !important;
  }

  .el-input-group__prepend {
    background-color: rgb(40, 43, 48);
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    border-radius: 10px !important;
  }

  .el-select__prefix {
    gap: 0px;
  }

  .el-input-group__append {
    padding: 0 10px;
  }

  width: 100%;
  @include flex(column, flex-start, center);
  position: absolute;
  left: 0;
  top: 0;

  >h3 {
    font-size: 24px;
    color: #fff;
    padding: 18px 0;
  }

  .el-input,
  .el-input__inner {
    height: 42px !important;
  }

  .el-input__wrapper {
    height: 40px !important;
    padding: 0 10px !important;
  }

  .phone {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;

    background-color: rgb(40, 43, 48);
    border: 1px solid transparent;

    &:hover {
      border: 1px solid #0a906c;
    }

    &:focus {
      border: 1px solid #0a906c;
      outline: none;
    }

    &:focus-within {
      border: 1px solid #0a906c;
      outline: none;
    }

    .el-icon {
      margin: 0 5px;
    }

    .el-input:focus {
      border-color: rgb(0, 144, 109) !important;
    }

    img {
      width: 32px;
      margin: 0 5px;
    }

    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
    }

    .el-select__placeholder {
      color: #fff;
      font-size: 16px;
    }

    .el-select__wrapper {
      padding: 0 0 !important;
      padding-left: 10px !important;
      border: none !important;
    }
  }

  .login {
    width: 90%;
    display: block;
    background-color: #0a906c !important;
    padding: 0 10px;
    height: 42px;
    text-align: center;
    margin: 15px 0 5px;
    border: none;
    font-size: 15px;
    color: #fff;
    border-radius: 10px;
  }

  .password {
    width: 100%;
    @include flex(row, flex-start, center);
    border-radius: 10px;
    background-color: rgb(40, 43, 48);

    border: 1px solid transparent;

    &:hover {
      border: 1px solid #0a906c;
    }

    &:focus {
      border: 1px solid #0a906c;
      outline: none;
    }

    &:focus-within {
      border: 1px solid #0a906c;
      outline: none;
    }


    strong {
      display: block;
      width: 2px;
      height: 28px;
      background-color: #4a4c53;
    }

    .el-icon {
      margin: 0 5px;
    }
  }

  .checkbox {
    width: 90%;
    @include flex(row, space-between, center);

    span {
      text-decoration: underline;
      font-size: 14px;
      color: #0a906c;
      cursor: pointer;
    
    }

    .el-checkbox {
      --el-checkbox-checked-input-border-color: #0a906c;
      --el-checkbox-checked-bg-color: #0a906c;
    }

    .el-checkbox__label {
      color: #606266;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #0a906c !important;
    }
  }

  .el-input__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    color: #fff;
  
  }

  .el-select__wrapper {
    background-color: rgb(40, 43, 48);
    height: 40px;
    box-shadow: none;
    color: #fff;
  }
}
</style>
